<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>酒店 首页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" href="./css/common.css">
</head>
<body>
    <div class="index-header">
        <div class="index-center">
            <div class="header-logo">
                <p class="logo-name">CESLAVIE</p>
                <hr>
                <p class="logo-hotels">HOTELS</p>
            </div>
            <ul class="header-nav">
                <li onclick="window.location.href='index.html';">首页</li>
                <li onclick="window.location.href='hotel-profile.html';">关于我们</li>
                <li onclick="window.location.href='news-center.html';">新闻中心</li>
                <li onclick="window.location.href='hotel-reservation.html';">客房预订</li>
                <li onclick="window.location.href='contact-us.html';">联系我们</li>
                <li style="color: #fff;background-color: #1a5de6;">招商联盟</li>
            </ul>
        </div>
    </div>
    <div class="join-banner"></div>
    <div class="join-content">
        <div class="join-center">
            <div class="join-header">
                <img src="./images/rectangle.png" alt="">
                <h3>招商加盟</h3>
            </div>
            <div class="join-nav">
                <span>首页</span><span>></span><span>招商加盟</span><span>></span><span class="join-change-text">加盟流程</span>
            </div>
            <!-- 招商加盟 tab切换 -->
            <div id="join-tab" class="join-tab">
                    <div class="join-list">
                        <ul>
                            <li class="joinli cur">加盟流程</li>
                            <li class="joinli">加盟优势</li>
                        </ul>
                    </div>
                    <div id="joinCon"> 
                        <div class="joinCon cur">
                            <!-- 加盟流程 -->
                            <div class="join-step"><span class="clickSpan"></span><p>第一步：加盟商加盟阶段</p></div>
                            <div class="join-step-content" style="display: none;">
                                <img src="./images/join-bg1.png" alt="">
                                <ol>
                                    <li>考察当地消费市场状况及发展趋势</li>
                                    <li>确定开店意向，位置、面积和投资规模等</li>
                                    <li>向总部索取有关资料和加盟申请表，或进行在线申请</li>
                                    <li>考察当地消费群体情况</li>
                                </ol>
                            </div>
                            <div class="join-step"><span class="clickSpan"></span><p>第二步：选址阶段</p></div>
                            <div class="join-step-content" style="display: none;">
                                <img src="./images/join-bg1.png" alt="">
                                <ol>
                                    <li>考察当地消费市场状况及发展趋势</li>
                                    <li>确定开店意向，位置、面积和投资规模等</li>
                                    <li>向总部索取有关资料和加盟申请表，或进行在线申请</li>
                                    <li>考察当地消费群体情况</li>
                                </ol>
                            </div>
                            <div class="join-step"><span class="clickSpan"></span><p>第三步：签约阶段</p></div>
                            <div class="join-step-content" style="display: none;">
                                <img src="./images/join-bg1.png" alt="">
                                <ol>
                                    <li>考察当地消费市场状况及发展趋势</li>
                                    <li>确定开店意向，位置、面积和投资规模等</li>
                                    <li>向总部索取有关资料和加盟申请表，或进行在线申请</li>
                                    <li>考察当地消费群体情况</li>
                                </ol>
                            </div>
                            <div class="join-step"><span class="clickSpan"></span><p>第四步：门店装修、布置阶段</p></div>
                            <div class="join-step-content" style="display: none;">
                                <img src="./images/join-bg1.png" alt="">
                                <ol>
                                    <li>考察当地消费市场状况及发展趋势</li>
                                    <li>确定开店意向，位置、面积和投资规模等</li>
                                    <li>向总部索取有关资料和加盟申请表，或进行在线申请</li>
                                    <li>考察当地消费群体情况</li>
                                </ol>
                            </div>
                            <div class="join-step"><span class="clickSpan"></span><p>第五步：培训阶段</p></div>
                            <div class="join-step-content" style="display: none;">
                                <img src="./images/join-bg1.png" alt="">
                                <ol>
                                    <li>考察当地消费市场状况及发展趋势</li>
                                    <li>确定开店意向，位置、面积和投资规模等</li>
                                    <li>向总部索取有关资料和加盟申请表，或进行在线申请</li>
                                    <li>考察当地消费群体情况</li>
                                </ol>
                            </div>
                            <div class="join-step"><span class="clickSpan"></span><p>第六步：开业阶段</p></div>
                            <div class="join-step-content" style="display: none;">
                                <img src="./images/join-bg1.png" alt="">
                                <ol>
                                    <li>考察当地消费市场状况及发展趋势</li>
                                    <li>确定开店意向，位置、面积和投资规模等</li>
                                    <li>向总部索取有关资料和加盟申请表，或进行在线申请</li>
                                    <li>考察当地消费群体情况</li>
                                </ol>
                            </div>
                            <div class="join-step"><span class="clickSpan"></span><p>第七步：后续经营阶段</p></div>
                            <div class="join-step-content" style="display: none;">
                                <img src="./images/join-bg1.png" alt="">
                                <ol>
                                    <li>考察当地消费市场状况及发展趋势</li>
                                    <li>确定开店意向，位置、面积和投资规模等</li>
                                    <li>向总部索取有关资料和加盟申请表，或进行在线申请</li>
                                    <li>考察当地消费群体情况</li>
                                </ol>
                            </div>
                       </div>                       
                        <div class="joinCon">
                           <!-- 加盟优势  -->
                            <div class="join-advantage">
                                <img class="hex hex1 show" src="./images/hexagon-blue.png" alt="">
                                <img class="hex hex2" src="./images/hexagon-blue.png" alt="">
                                <img class="hex hex3" src="./images/hexagon-blue.png" alt="">
                                <img class="hex hex4" src="./images/hexagon-blue.png" alt="">
                                <img class="hex hex5" src="./images/hexagon-blue.png" alt="">
                                <img class="hex hex6" src="./images/hexagon-blue.png" alt="">
                                <span class="hexnum1">02</span><span class="hexnum2">04</span><span class="hexnum3">06</span><span class="hexnum4">01</span><span class="hexnum5">03</span><span class="hexnum6">05</span>
                                <p class="hextext hextext1 show">国际化</p>
                                <p class="hextext hextext2">王室钟爱</p>
                                <p class="hextext hextext3">品牌力</p>
                                <p class="hextext hextext4">产品力</p>
                                <p class="hextext hextext5">传播力</p>
                                <p class="hextext hextext6">运营力</p>
                            </div>
                            <p class="advantage-text">市场口碑无差评，产品易用受青睐    可出售稀缺的独立IPv4地址  有诚意的代理政策，保证代理商充足利润空间。面向代理商的各种促销优惠和营销让利活动   产品功能支持灵活配置，代理商可打造自主建站品牌，自由定价 支持使用独立域名登录用户管理后台，且没有任何标识。</p>
                        </div>
                    </div>
                   
                </div>
        </div>
        <div class="white"></div>
    </div>    
    <div class="index-footer">
        <div class="index-center">
            <ul class="footer-intro">
                <li>
                    <p><a href="hotel-profile.html">关于我们</a></p>
                    <span><a href="javascript:;">公司简介</a></span>
                    <span><a href="javascript:;">发展历程</a></span>
                    <span><a href="javascript:;">招贤纳士</a></span>
                </li>
                <li>
                    <p><a href="news-center.html">新闻中心</a></p>
                    <span><a href="javascript:;">新闻资讯</a></span>
                    <span><a href="javascript:;">行业新闻</a></span>
                    <span><a href="javascript:;">酒店新闻</a></span>
                </li>
                <li>
                    <p><a href="contact-us.html">联系我们</a></p>
                    <span><a href="javascript:;">电话地址</a></span>
                    <span><a href="javascript:;">邮箱传真</a></span>
                    <span></span> 
                </li>
                <li style="margin-right: 0;">
                    <p><a href="merchants-join.html">招商联盟</a></p>
                    <span><a href="javascript:;">加盟流程</a></span>
                    <span><a href="javascript:;">加盟优势</a></span>
                    <span></span>
                </li>
            </ul>
        </div>
        <div class="footer-copyright"><span>版权公©1995-2017赛维集团控股酒店上海外滩十八号。版权所有</span></div>
    </div>

    <script src="./js/swiper.js"></script>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
        // tab切换
        window.onload = function(){
			var oDiv = document.getElementById("join-tab");
			var lis = oDiv.getElementsByClassName("joinli");
            var oDivCon = document.getElementById("joinCon");
            var lisDiv = oDivCon.getElementsByClassName("joinCon");
            for(var i=0;i<lis.length;i++){
				lis[i].index = i;
				lis[i].onclick = function(){
                    show(this.index);
                    $(".join-change-text").text($(this).text());
                }
			}
			function show(a){
				for(var j=0;j<lis.length;j++){
					lis[j].className = "joinli";
					lisDiv[j].className = "joinCon";					
				}
				lis[a].className = "joinli cur";
				lisDiv[a].className = "joinCon cur";
			}
        }
        // 加盟流程
        var steps = document.getElementsByClassName("join-step");
        var jContent = document.getElementsByClassName("join-step-content");
        var spans = document.getElementsByClassName("clickSpan");
        for(var i=0;i<steps.length;i++){
                steps[i].index = i;
                steps[i].onclick = function(){
                    // show(this.index);
                    if(jContent[this.index].style.display == "none"){
                        console.log(1);
                        for(var j=0; j<steps.length; j++){
                            spans[j].style.background = "url('./images/right-icon.png') no-repeat";
                        }
                        spans[this.index].style.background = "url('./images/down-icon.png') no-repeat";	
                        //隐藏每个div
                        for(var i=0; i<jContent.length; i++){
                            jContent[i].style.display="none";
                        }
                        //根据索引显示相应的div
                        jContent[this.index].style.display = "block";
                    }else{
                        console.log(2);
                        spans[this.index].style.background = "url('./images/right-icon.png') no-repeat";
                        jContent[this.index].style.display = "none";
                    }
                }
			}
        //加盟优势的样式切换
        var imgs = document.getElementsByClassName("hex");
        var texts = document.getElementsByClassName("hextext");
            for(var i=0; i<imgs.length; i++){
                //循环把i的值赋值给li的index
                imgs[i].index = i;
                texts[i].index = i;
                texts[i].onmouseover = function(){
                     //移除每个li上存在的类
                    for(var j=0; j<imgs.length; j++){
                        var x = Number(j)+1;
                        imgs[j].className = "hex hex"+x;
                        texts[j].className = "hextext hextext"+x;
                    }
                    //给当前li添加类
                    console.log(this.index);
                    var n =Number(this.index)+1;
                    this.className ="hextext hextext"+n+" show";
                    imgs[this.index].className ="hex hex"+n+" show";
                }
            }
    </script>

</body>
</html>